<template>
    <div class="section-header">
        <h2> Featured Course</h2>
    </div>
    <div class="course__wrapper">
        <SwiperSlide  :dataList="courses" :breakpoints="breakpoints" :loop="true"
            :autoplay="autoplay" :speed="speed" :pagination="pagination" :grabCursor="grabCursor">
            <template #content="{ item }">
                <CourseCard :courseDetails="item" />
            </template>
            <template v-slot:pagination>
                <div class="slider__pagination-1 mt-5 py-2 text-center"></div>
            </template>
        </SwiperSlide>
    </div>
</template>

<script>
import SwiperSlide from "@/components/base/slots/SwiperSlide.vue";
import CourseCard from "@/components/partials/CourseCard.vue";
export default {
    components: {
        SwiperSlide, CourseCard
    },
    props: {
        courses: {
            type: Array,
            default: () => [],
        }
    },
    data() {
        return {
            spaceBetween: 24,
            grabCursor: true,
            loop: true,
            slidesPerView: 1,
            breakpoints: {
                576: {
                    slidesPerView: 1,
                },
                768: {
                    slidesPerView: 2,
                },
                992: {
                    slidesPerView: 3,
                    spaceBetween: 15,
                },
                1200: {
                    slidesPerView: 3,
                    spaceBetween: 25,
                },
                1400: {
                    slidesPerView: 4,
                    spaceBetween: 20,
                }

            },

            autoplay: {
                delay: 1,
                disableOnInteraction: true,
            },
            speed: 3000,
            pagination: {
                el: ".slider__pagination-1",
                clickable: true
            },
        }
    },

}
</script>

<style></style>